
<html>
	<head>
		<title>
			Test chess board
		</title>
		<script>
		bCursor = false;
		cursorImage = null;
		lastclickeddiv = null;
		function setCursor(img) {
			document.body.style.cursor = "url("+img+"), wait" ;
			bCursor = true;
			cursorImage = img;
		}
		function normalCursor() {
			document.body.style.cursor = "default" ;
			bCursor = false;
			cursorImage = null;
		}
		
		function AddDivElement(divname,X,Y) {
			var ni = document.getElementById('mainboard');
			var newdiv = document.createElement('div');
			var divIdName=divname;
			newdiv.setAttribute('id',divIdName);
			var divStyle = 'position: absolute; top: '+X+'px; left: '+Y+'px; width: 55px; height: 55px;'
			newdiv.setAttribute('style',divStyle);			
			var onc = 'HandleClick("' + divIdName + '")';			
			newdiv.setAttribute('onclick',onc);
			var onover = 'SetBorder("' + divIdName + '")';
			newdiv.setAttribute('onmouseover',onover);
			var onout = 'UnSetBorder("' + divIdName +'")';
			newdiv.setAttribute('onmouseout',onout);			
			ni.appendChild(newdiv);			
		}
		function LoadPosition() {			
			for (var i=0 ; i<10; i++) {
				for (var j=0; j<9; j++) {
					var divn = 'div'+'_'+i+'_'+j;					
					var divposX = 43+i*60;
					var divposY = 43+j*60;
					AddDivElement(divn,divposX,divposY);
				}
			}			
		}
		
		function InitBoard() {
			//black
			SetImageXY(0,0,'image/rook_black.svg');
			SetImageXY(0,8,'image/rook_black.svg');
			SetImageXY(0,1,'image/knight_black.svg');
			SetImageXY(0,7,'image/knight_black.svg');
			SetImageXY(0,2,'image/elephant_black.svg');
			SetImageXY(0,6,'image/elephant_black.svg');
			SetImageXY(0,3,'image/advisor_black.svg');
			SetImageXY(0,5,'image/advisor_black.svg');
			SetImageXY(0,4,'image/general_black.svg');
			SetImageXY(2,1,'image/cannon_black.svg');
			SetImageXY(2,7,'image/cannon_black.svg');
			SetImageXY(3,0,'image/solider_black.svg');
			SetImageXY(3,2,'image/solider_black.svg');
			SetImageXY(3,4,'image/solider_black.svg');
			SetImageXY(3,6,'image/solider_black.svg');
			SetImageXY(3,8,'image/solider_black.svg');
			//red
			SetImageXY(9,0,'image/rook_red.svg');
			SetImageXY(9,8,'image/rook_red.svg');
			SetImageXY(9,1,'image/knight_red.svg');
			SetImageXY(9,7,'image/knight_red.svg');
			SetImageXY(9,2,'image/elephant_red.svg');
			SetImageXY(9,6,'image/elephant_red.svg');
			SetImageXY(9,3,'image/advisor_red.svg');
			SetImageXY(9,5,'image/advisor_red.svg');
			SetImageXY(9,4,'image/general_red.svg');
			SetImageXY(7,1,'image/cannon_red.svg');
			SetImageXY(7,7,'image/cannon_red.svg');
			SetImageXY(6,0,'image/solider_red.svg');
			SetImageXY(6,2,'image/solider_red.svg');
			SetImageXY(6,4,'image/solider_red.svg');
			SetImageXY(6,6,'image/solider_red.svg');
			SetImageXY(6,8,'image/solider_red.svg');						
		}
		
		function InitOnload() {
			LoadPosition();
			InitBoard();
			var player1 = document.getElementById("playername1");
			try {
				player1.innerHTML = parent.Username;			
			}
			catch (e) {
			}
			processGameEvent();
		}
		
		function processGameEvent() {
			//process outgoing data
			//process incoming data
			while (parent.GameEventQueue.size()>0) {
				var data = parent.GameEventQueue.pop();
				var args = data.split(" ");
				if (args[0]=="userlist") {
					if (args.length == 3) {
						var enemy = ""
						if (args[1] == parent.Username) {
							enemy = args[2];
						}
						else {
							enemy = args[1];
						}
						var player2 = document.getElementById("playername2");
						try {
							player2.innerHTML = enemy;			
						}
						catch (e) {
						}						
					}
				}
				if (args[0]=="userturn") {
					highlightPlayerName(args[1]);
				}
				if (args[0]=="userplay") {
					var user = args[1];
					var src = args[2];
					var dst = args[3];
					var pp = src.split('_');
					var X = pp[0];
					var Y = pp[1];
					pp = dst.split('_');
					var XX = pp[0];
					var YY = pp[1];
					if (user == parent.Username) {
						MovePiece(X,Y,XX,YY);
					}
					else {
						X = 9-X
						Y = 8-Y
						XX = 9-XX
						YY = 8-YY
						MovePiece(X,Y,XX,YY);
					}
				}
				
			}
			//repeat
			setTimeout("processGameEvent()",200);
		}
		
		function highlightPlayerName(playername) {
			var player1 = document.getElementById("playername1");
			var player2 = document.getElementById("playername2");
			if (playername == parent.Username) {				
				var mystyle = "position: absolute; top: 600px; left: 650px; color:red;"
				player1.setAttribute('style',mystyle);				
				mystyle = "position: absolute; top: 10px; left: 650px";
				player2.setAttribute('style',mystyle);
			}
			else {
				var mystyle = "position: absolute; top: 600px; left: 650px;"
				player1.setAttribute('style',mystyle);				
				mystyle = "position: absolute; top: 10px; left: 650px; color:red;";
				player2.setAttribute('style',mystyle);			
			}
		}
		
		function Test() {
			InitBoard();
		}
		
		function SetImageXY(X,Y,image) {			
			var divname = 'div'+'_'+X+'_'+Y;
			var ni = document.getElementById(divname);						
			if (ni == null) {
				alert("error");
			}
			var imgname = divname+'img';
			var ihtml = '<img id="'+imgname+'" src="'+image+'"/>';
			ni.innerHTML=ihtml						
		}
		function SetImage(divname,image) {						
			var ni = document.getElementById(divname);						
			if (ni == null) {
				alert("error");
			}
			var imgname = divname+'img';
			var ihtml = '<img id="'+imgname+'" src="'+image+'"/>';
			ni.innerHTML=ihtml;
		}
		
		function ClearImage(divname) {
			var ni = document.getElementById(divname);						
			if (ni == null) {
				alert("error");
			}
			ni.innerHTML="";
		}
		
		function SetBorder(divname) {
			var ni = document.getElementById(divname);
			if (ni == null) {
				alert("error");
			}
			ni.style.border = "2px solid #0000FF";
		}
		function UnSetBorder(divname) {
			var ni = document.getElementById(divname);
			if (ni == null) {
				alert("error");
			}
			ni.style.border = "0px";			
		}
		
		function HandleClick(divname) {			
			var imgname = divname+'img';
			var img = document.getElementById(imgname);
			if (!bCursor) {
				if (img != null) {
					var srcimg = img.getAttribute("src");
					setCursor(srcimg);
					lastclickeddiv = divname;
				}
			}
			else {
				if (divname != lastclickeddiv) {					
					var pp = divname.split('_');
					var XX = pp[1];
					var YY = pp[2];
					pp = lastclickeddiv.split('_');
					var X = pp[1];
					var Y = pp[2];
					var command = "play "+X+"_"+Y+" "+XX+"_"+YY;
					//MovePiece(X,Y,XX,YY);
					parent.DataSendQueue.push(command);					
				}
				else {
					SetImage(divname,cursorImage);
					normalCursor();
					lastclickeddiv = null;
				}
				
			}
		}
		function MovePiece(X,Y,XX,YY) {
			var src = 'div'+'_'+X+'_'+Y
			var dst = 'div'+'_'+XX+'_'+YY
			var imagesrc = document.getElementById(src+'img').getAttribute('src');
			SetImage(dst,imagesrc);
			normalCursor();
			ClearImage(src);
			lastclickeddiv = null;
		}
		</script>
	</head>
	<body onload="InitOnload()">
		<div id="mainboard" name="mainboard">
			<img src="image/xiangqi_board_only.svg" width="600" height="660"/>
			<div style="position: absolute; top: 10px; left: 650px" id="playername2">
				Waiting...
			</div>
			<div style="position: absolute; top: 600px; left: 650px" id="playername1">
				Waiting...
			</div>
		</div>
	</body>
</html>